<script setup>
import KOfooter from '../../components/KOfooter/KOfooter.vue'
import KOheader from "../../components/KOheader/KOheader.vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import {ref,onMounted,watch} from "vue"
import 'swiper/css'
import { useRouter } from 'vue-router'

const images = [
  {
    url: 'https://cdn.quickper.com/media/tagskin/bannerMedium/1c1cdc73-0055-4ad9-ad4a-2e003b8cac0f/w1920h540t1.png',
    alt: 'Image 1'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/bannerMedium/3cf07365-66ec-42ec-8bae-e6bc70cf4f30/w1920h540t1.png',
    alt: 'Image 2'
  }
];
const priceOMMH=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/e16b276c-9686-47ee-aef1-c9e0d5c813ae/w300h300t1.png",
    name:"OMMH | 覺知净化洗髮露",
    oldjia:"NT$ 780",
    newjia:"NT$ 680"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/569c8f8d-2244-4b8f-a27b-a022a56657f9/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/9f08ab8f-7d96-4277-bf86-cf167553023d/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad119b6-4987-4137-bf49-3162f52cf6bd/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:'@/assets/look.png',
    name:"",
    oldjia:"",
    newjia:""
  },
]
const priceTAG=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  }
]
const priceFIRR=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad8ab66-9d24-42f0-8ee9-314b56d2bf20/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad8ab66-9d24-42f0-8ee9-314b56d2bf20/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad8ab66-9d24-42f0-8ee9-314b56d2bf20/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
]
const priceNEW=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/162a63f9-a6dd-4460-8d42-0afe2f636ae0/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  }
]
const priceX=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/1cf1a100-fa30-4f39-aed5-8a497ac30a66/w300h300t1.png",
    name:"醒膚冥想組",
    oldjia:"NT$ 2960",
    newjia:"NT$ 2880"
  }
]
const toPOOL=()=>{
  router.push({
    path: '/POOL'
  })
}

const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);
// 移动端
const img=[
  {
    url:"https://cdn.quickper.com/media/tagskin/banner/5df201cb-e1c9-47ca-ba72-14284953781e/w800h1200t1.png"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/banner/73a299fc-5a4d-4761-8229-b068af3e462d/w800h1200t1.png"
  }
]
const tis=[
  {
    img:"https://cdn.quickper.com/media/tagskin/product/3c060019-69e6-4b8e-99c1-ae62d039e967/origin.gif",
    name:"保健"
  },
  {
    img:"https://cdn.quickper.com/media/tagskin/product/483f787f-de13-4035-afe8-bb7ba150313f/origin.gif",
    name:"生活"
  },
  {
    img:"https://cdn.quickper.com/media/tagskin/product/1cf1a100-fa30-4f39-aed5-8a497ac30a66/w90h90t1.png",
    name:"保健"
  },
  {
    img:"https://cdn.quickper.com/media/tagskin/product/a319be35-e0d3-4d9c-957b-2212cff090fa/w90h90t1.png",
    name:"服饰"
  },
  {
    img:"https://cdn.quickper.com/media/tagskin/product/483f787f-de13-4035-afe8-bb7ba150313f/origin.gif",
    name:"美食"
  },
]
const hideshow = ref(false)
const router = useRouter()
const toaction=(item)=>{
  router.push({
    path: '/ETCH',
    query: {
      url: item.url,
      name: item.name,
      oldjia:item.oldjia,
      newjia:item.newjia
    }
  })
}
const toSWAP=()=>{
  router.push({
    path: '/SWAP',
  })
}
</script>

<template>
  <div>
    <div v-if="innerWidth" class="HOME">
    <KOheader/>
    <!-- 轮播图 -->
      <swiper
      :slides-per-view="1"
      :space-between="0"
      :autoplay="{delay: 3000}"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide style="width: 100%; height:400px ;position: relative;" v-for="item in images" :key="item">
        <img style="width: 100%; height: 400px;" :src="item.url" alt="">
      </swiper-slide>
    </swiper>
    <!-- 商品-OMMH -->
    <div style="margin-top:30px; padding-left:20% ; padding-right:20%; border-radius: 10px;">
      <h2 style="color: #000; font-weight: 700;">OMMH</h2>
      <div style="display: flex; margin-top: 30px; overflow: hidden ;">
        <swiper
          :slides-per-view="4"
          :space-between="0"
          :autoplay="{delay: 3000}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
        <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceOMMH" :key="index">
          <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
          <div>{{ item.name }}</div>
          <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
        </swiper-slide>
      </swiper>
      </div>
      <button @click="toSWAP" style="margin-top: 30px; background-color: #fff; width: 170px; height: 40px; border: 1px solid #000; border-radius: 10px;">查看所有商品</button>
    </div>
    <!-- 商品-TAG SKIN -->
    <div style="margin-top:30px; padding-left:20% ; padding-right:20%; border-radius: 10px;">
      <h2 style="color: #000; font-weight: 700;">TAG SKIN</h2>
      <div style="display: flex; margin-top: 30px; overflow: hidden ;">
        <swiper
          :slides-per-view="4"
          :space-between="0"
          :autoplay="{delay: 3000}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
        <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceTAG" :key="index">
          <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
          <div>{{ item.name }}</div>
          <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
        </swiper-slide>
      </swiper>
      </div>
      <button @click="toSWAP"  style="margin-top: 30px; background-color: #fff; width: 170px; height: 40px; border: 1px solid #000; border-radius: 10px;">查看所有商品</button>
    </div>
    <!-- 大图 -->
    <div style="width: 100%; height: 400px; margin-top: 30px;">
      <img style="width: 100%; height: 400px;" src="https://cdn.quickper.com/media/tagskin/bannerMedium/4b995bd7-5677-48ec-b85a-8cd5f3629504/w1920h540t1.png" alt="">
    </div>
    <!-- 商品-FIRR 獨傢選品  -->
    <div style="margin-top:30px; padding-left:20% ; padding-right:20%; border-radius: 10px;">
      <h2 style="color: #000; font-weight: 700;">FIRR 獨傢選品</h2>
      <div style="display: flex; margin-top: 30px; overflow: hidden ;">
        <!-- <swiper
          :slides-per-view="4"
          :space-between="0"
          :autoplay="{delay: 3000}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        > -->
        <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceFIRR" :key="index">
          <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
          <div>{{ item.name }}</div>
          <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
        </swiper-slide>
      <!-- </swiper> -->
      </div>
      <button @click="toSWAP"  style="margin-top: 30px; background-color: #fff; width: 170px; height: 40px; border: 1px solid #000; border-radius: 10px;">查看所有商品</button>
    </div>
    <!-- 商品-NEW 最新商品 -->
    <div style="margin-top:30px; padding-left:20% ; padding-right:20%; border-radius: 10px;">
      <h2 style="color: #000; font-weight: 700;">NEW 最新商品</h2>
      <div style="display: flex; margin-top: 30px; overflow: hidden ;">
        <swiper
          :slides-per-view="4"
          :space-between="0"
          :autoplay="{delay: 3000}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
        <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceNEW" :key="index">
          <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
          <div>{{ item.name }}</div>
          <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
        </swiper-slide>
      </swiper>
      </div>
      <button @click="toSWAP"  style="margin-top: 30px; background-color: #fff; width: 170px; height: 40px; border: 1px solid #000; border-radius: 10px;">查看所有商品</button>
    </div>
    <!-- 商品-醒久鯨｜限時開團 1/23-1/29 -->
    <div style="margin-top:30px; padding-left:20% ; padding-right:20%; border-radius: 10px;">
      <h2 style="color: #000; font-weight: 700;">醒久鯨｜限時開團 1/23-1/29</h2>
      <div style="display: flex; margin-top: 30px; overflow: hidden ;">
        <!-- <swiper
          :slides-per-view="4"
          :space-between="0"
          :autoplay="{delay: 3000}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        > -->
        <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceX" :key="index">
          <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
          <div>{{ item.name }}</div>
          <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
        </swiper-slide>
      <!-- </swiper> -->
      </div>
      <button @click="toSWAP"  style="margin-top: 30px; background-color: #fff; width: 170px; height: 40px; border: 1px solid #000; border-radius: 10px;">查看所有商品</button>
    </div>
      <KOfooter/>
    </div>
    <div class="HOME" v-else>
      <KOheader/>
      <div style="display: flex; margin-top: 20px; padding-left:20px ; padding-right:20px; overflow: hidden;" >
        <div style="width: 60px; margin-right: 20px;" v-for="item,index in tis" :key="index">
            <img style="border: 2px solid #c93961; border-radius: 50%; width: 60px; height: 60px;" :src=item.img alt="">
            <div style="text-align: center;">{{ item.name }}</div>
        </div>
      </div>
      <div @click="toPOOL" style="margin-top: 20px; font-weight: 700; background-color: #f6f5f5; width: 100%; height: 60px; line-height: 60px; text-align: center;">
          我想加入 FIRR ？
      </div>
          <!-- 轮播图 -->
          <div style="margin-top: 40px;">
            <swiper
            :slides-per-view="1"
            :space-between="0"
            :autoplay="{delay: 3000}"
          >
            <swiper-slide style="width: 100%; height:600px ;position: relative;" v-for="item in img" :key="item">
              <img style="width: 100%; height: 600px;" :src="item.url" alt="">
            </swiper-slide>
          </swiper>
          </div>
          <!-- 商品-OMMH -->
          <div style="margin-top:30px; padding-left:5% ; padding-right:0%; border-radius: 10px;">
          <h2 style="color: #000; font-weight: 700;">OMMH</h2>
          <div style="display: flex; margin-top: 30px; overflow: hidden ;">
            <swiper
              :slides-per-view="1.7"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
            <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceOMMH" :key="index">
              <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
              <div>{{ item.name }}</div>
              <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
            </swiper-slide>
          </swiper>
          </div>
          </div>
          <!-- 商品-TAG SKIN -->
          <div style="margin-top:30px; padding-left:5% ; padding-right:0%; border-radius: 10px;">
            <h2 style="color: #000; font-weight: 700;">TAG SKIN</h2>
            <div style="display: flex; margin-top: 30px; overflow: hidden ;">
              <swiper
              :slides-per-view="1.7"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
            <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceTAG" :key="index">
              <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
              <div>{{ item.name }}</div>
              <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
            </swiper-slide>
          </swiper>
            </div>
          </div>
           <!-- 大图 -->
          <div style="width: 100%; height: 600px; margin-top: 30px;">
            <img style="width: 100%; height: 600px;" src="https://cdn.quickper.com/media/tagskin/banner/4573403a-3ea4-4457-aedb-343984e35932/w800h1200t1.png" alt="">
          </div>
          <!-- 商品-FIRR 獨傢選品  -->
          <div style="margin-top:30px; padding-left:5% ; padding-right:0%; border-radius: 10px;">
            <h2 style="color: #000; font-weight: 700;">FIRR 獨傢選品</h2>
            <div style="display: flex; margin-top: 30px; overflow: hidden ;">
              <swiper
              :slides-per-view="1.7"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
            <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceFIRR" :key="index">
              <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
              <div>{{ item.name }}</div>
              <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
            </swiper-slide>
          </swiper>
            </div>
          </div>
          <!-- 商品-NEW 最新商品 -->
          <div style="margin-top:30px; padding-left:5% ; padding-right:0%; border-radius: 10px;">
            <h2 style="color: #000; font-weight: 700;">NEW 最新商品</h2>
            <div style="display: flex; margin-top: 30px; overflow: hidden ;">
              <swiper
                :slides-per-view="1.7"
                :space-between="0"
                :autoplay="{delay: 3000}"
              >
              <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceNEW" :key="index">
                <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
                <div>{{ item.name }}</div>
                <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
              </swiper-slide>
            </swiper>
            </div>
          </div>
          <!-- 商品-醒久鯨｜限時開團 1/23-1/29 -->
          <div style="margin-top:30px; padding-left:5% ; padding-right:0%; border-radius: 10px;">
            <h2 style="color: #000; font-weight: 700;">醒久鯨｜限時開團 1/23-1/29</h2>
            <div style="display: flex; margin-top: 30px; overflow: hidden ;">
              <div @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceX" :key="index">
                <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
                <div>{{ item.name }}</div>
                <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
              </div>
            </div>
          </div>
      <KOfooter/>
    </div>
  </div>
</template>

<style scoped>
.HOME {
  /* background-image: url('../../assets/图层 8@2x.png'); */
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.el-button {
  font-size: 20px;
  height: 80px;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 80px;
  padding-right: 80px;
  border-radius: 40px;
  /* background-color: rgb(152, 90, 183); */
  background: linear-gradient(to right, rgb(198, 66, 189), rgb(120, 150, 255));
  /* background: linear-gradient( to right, #160d35, #2f0a49); */
  color: white;
  border: 0;
}

.button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-8.3125rem);
}

::v-deep .el-icon {
  color: rgb(255, 255, 255);
}
.linksRot{
  color: white;
  font-size: 20px;
  font-weight: 700;
}
</style>